<template>
  <div>
    <div
      id="container"
      style="width: 100%; height: 250px; border: 1px solid black"
    ></div>
    <el-table :data="agents">
      <el-table-column label="公司名称" prop="name" align="center"> </el-table-column>
      <el-table-column label="公司地址" prop="address" align="center"> </el-table-column>
      <el-table-column label="公司位置" align="center">
        <template slot-scope="scope" align="center">
          {{ scope.row.city }} {{ scope.row.district }}
        </template>
      </el-table-column>
      <el-table-column label="联系电话" prop="phone" align="center"> </el-table-column>
      <el-table-column label="邮箱" prop="email" align="center"> </el-table-column>

      <el-table-column label="操作" width="170px" align="center">
        <template slot-scope="scope">
          <el-button
            @click="loc(scope.row)"
            size="small"
            type="success"
            icon="el-icon-location-information"
            circle
          >
          </el-button>
          <el-button
            @click="delItem(scope.row.id)"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data() {
    return {
      map: null, // 绑定加载到的地图对象
      agents: [], // 绑定所有的电影院
    };
  },

  methods: {
    delItem(id) {
      // 弹出确认删除对话框
      this.$confirm("该操作删除，是否继续？", "提示", {
        type: "warning",
      }).then(() => {
        // 确认删除
        // 发送请求，执行删除操作
        this.$http.agentApi.delete({ id }).then((res) => {
          this.$message({ type: "success", message: "删除成功" });
          // 刷新当前列表  整理参数发送请求
          this.$http.agentApi.list().then((res) => {
            this.agents = res.data.data;
          });
        });
      });
    },
    loadMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "0c0401233e61c4904a73d7d690d52ed3",
      };
      AMapLoader.load({
        // 申请好的Web端开发者Key，首次调用 load 时必填
        key: "75fa4b033e5ff6a8cec6fa9d01539c5a",
        version: "2.0", // 指定要加载的 JSAPI 的版本
        plugins: [], // 需要使用的的插件列表
      }).then((AMap) => {
        this.map = new AMap.Map("container");
        this.map.setCenter([116.46 , 39.92])
        this.map.setZoom(8)
        // 为地图绑定事件
        this.map.on('click', (ev)=>{
          let {lng, lat} = ev.lnglat
          console.log({lng, lat})
          // 添加一个点标记
          if(this.marker){
            this.marker.setPosition([lng, lat])
          }else {
            this.marker = new AMap.Marker({
              position: [lng, lat]
            })
            this.map.add(this.marker)
          }
          // 通过该经纬度，获取对应的详细位置字符串描述
          // 需要访问高德地图的web服务
        })

    }).catch(e => {
        console.log(e);
      });
    },
    loc(agent) {
      let { longitude, latitude } = agent;
      this.map.setCenter([longitude, latitude]);
      this.map.setZoom(18);
      // 显示标记
      this.marker = new AMap.Marker({
              position: [longitude, latitude]
            })
            this.map.add(this.marker)


    },
  },

  mounted() {
    // 加载所有的电影院
    this.$http.agentApi.list().then((res) => {
      this.agents = res.data.data;
    });

    // 加载地图内容
    this.loadMap();
  },
};
</script>

<style lang="scss" scoped>
</style>